<template>
	<view>
		<view class="m-alert">
			<text>购买成功之后, 请前往"智慧社区"页面关注公众号, 即可接受相关推送消息。</text>
		</view>
		<view class="m-pay">
			<swiper :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration"
				:previous-margin="previousmargin" :next-margin="nextmargin" style="height: 80%;" @change="change"
				:current="current">
				<swiper-item v-for="(item, index) in serviceList" :key="index">
					<view class="m-card" :class="index == current? 'active' : ''">
						<view class="u-card-title">{{item.title}}</view>
						<text class="u-card-price">￥{{item.price}}</text>
						<view class="u-card-useday">服务有效期：{{item.time}}天</view>
						<view v-for="(item, index) in item.service" :key="index">
							<text class="u-card-detail">{{item.name}}</text>
							<text class="u-card-detail">{{item.name}}</text>
							<text class="u-card-detail">{{item.name}}</text>
							<text class="u-card-detail">{{item.name}}</text>
						</view>
					</view>
				</swiper-item>
			</swiper>
			<view class="m-submit">
				<button class="u-btn" type="default">支付</button>
			</view>
		</view>
	</view>

</template>
<script>
	import USER from '@/api/user/index.js'

	export default {
		data() {
			return {
				serviceList: [],
				curIndex: 0, // 当前选中

				indicatorDots: true,
				autoplay: false,
				interval: 2000,
				duration: 500,
				previousmargin: "30rpx",
				nextmargin: "30rpx",
				current: 0
			}
		},
		onLoad(opt) {
			this.getServiceList();
		},
		methods: {
			getServiceList() {
				uni.showLoading({
					title: '获取数据中'
				});
				USER.buyServices(1, 10).then(res => {
					uni.hideLoading();
					this.serviceList = res.data.data;
				})
			},
			change(e) {
				this.current = e.detail.current;
				console.log(this.current)
			},
		}
	}
</script>
<style lang="scss" scoped>
	.m-pay {
		position: absolute;
		top: 130rpx;
		right: 0;
		bottom: 0;
		left: 0;
		overflow: hidden;

		.m-card {
			box-sizing: border-box;
			padding: 20rpx;
			border-radius: 20rpx;
			transform: scale(0.85);
			background-image: linear-gradient(to bottom right, #2a9f93, #2c6975);
			// background-image: url(../../../static/images/service-bg.png);
			font-size: 34rpx;
			box-shadow: 0px 10rpx 20rpx #fff;
			z-index: 9999;
			color: #fff;

			&.active {
				transform: scale(1);
			}

			view,
			text {
				margin: 20rpx 20rpx 20rpx 0;
			}

			.u-card-title {
				font-size: 36rpx;
			}

			.u-card-detail {
				font-size: 30rpx;
			}

			.u-card-useday {
				font-size: 30rpx;
				color: #000000;
			}

			.u-card-price {
				font-size: 32rpx;
			}
		}

	}
</style>
